<template>
  <div class="flex flex-row gap-2 justify-center items-center">
    <AlertCircleOutline v-if="message.status === MessageStatus.error" class="w-[20px] h-[20px] text-red-500" />
    <component :is="RenderMessage(message)" />
  </div>
</template>

<script lang="ts" setup>
import { h } from "vue";
import { IMessage, MessageStatus, MessageType } from "@/types/chat";
import MessageImage from "./components/MessageImage.vue";
import MessageFile from "./components/MessageFile.vue";
import MessageText from "./components/MessageText.vue";
import MessageMixTxtImg from "./components/MessageMixTxtImg.vue";
import MessageVideoCall from "./components/MessageVideoCall.vue";
import MessageVoiceCall from "./components/MessageVoiceCall.vue";
import { AlertCircleOutline } from "@vicons/ionicons5";
withDefaults(
  defineProps<{
    message: IMessage;
  }>(),
  {},
);

// 渲染消息
const RenderMessage = (message: IMessage) => {
  switch (message.messageType) {
    case MessageType.text:
      return h(MessageText, { message });
    case MessageType.videoCall:
      return h(MessageVideoCall, { message });
    case MessageType.voiceCall:
      return h(MessageVoiceCall, { message });
    case MessageType.image:
      return h(MessageImage, { message });
    case MessageType.file:
      return h(MessageFile, { message });
    case MessageType.mixTxtImg:
      return h(MessageMixTxtImg, { message });
    default:
      console.log("未知消息类型");
      return h(MessageText, { message });
  }
};

// case MessageType.quotation:
//   const historyItem = chat.FindHistoryQuotation(message.quotationId!);
//   if (!historyItem) return h(MessageText, { message });
//   return h("div", [h(ReferMention, { showClose: false, message: historyItem }), h("div", message.content)]);
</script>

<style lang="scss" scoped></style>
